class detailsSide {
    constructor() {
        this.sbox = document.querySelector('.smallBox')
        this.pic = document.querySelector('.smallBox>img')
        this.mask = document.querySelector('smallBox>span')
        this.bbox = document.querySelector('.bigBox')
        this.ul = document.querySelector('.xiang_qing>ul')
        this.title = document.querySelector('.title')
        this.price = document.querySelector('.price')
        this.desc = document.querySelector('.desc')
        this.span = document.querySelector('.last .number')
      
        this.xq = document.querySelector('.xiang_qing')
        this.input = document.querySelector('.btn')
        this.abtn = document.querySelector('.sub')
        this.jbtn = document.querySelector('.add')
        this.num = document.querySelector('#num')
        this.data = []
        this.request()
        this.Switchpicture()
        this.count()
        this.abtn1()
        this.jbtn1()
        this.gouwu1()

        // this.over()
        // this.out()
    }


    getQueryStr(name) {



        let id = location.search.slice(1)
        // console.log(id)     //id=2
        let obj = {}
        let arr = id.split('=')
        //console.log(arr)   //['id', '2']
        obj[arr[0]] = arr[1]
        //console.log(obj)   //{id: '2'}
        return obj[name]
    }
    request() {
        //判断有没有id存在
        let myId = this.getQueryStr('data-id')
        // console.log(myId);
        //有id直接跳转首页
        if (!myId) {
            // console.log(555);
            location.href = '../index.html'
            return false
        } else {
            //请求商品数据


            $.ajax({
                url: '../data/list.json',   // 必填，请求的地址 （获取这里填获取数据的地址）
                method: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写） 

            }).then(res => {
                // console.log(111,res)
                this.data = res.result.items
                // console.log(this.data);
                //   goods返回的是找到的这条数据
                let goods = this.data.find(item => { return item.id == myId })
                //这里调用渲染函数是为了传递商品数据goods
                // console.log(goods);
                this.render(goods)
                this.gouwu1(goods)
            })

            // console.log(res)

            //对比商品数据获取当前点击的商品

            // console.log(goods)

        }
    }
    render(goods) {

        this.sbox = document.querySelector('.smallBox')

        this.mask = document.querySelector('.smallBox>span')
        // console.log(this.mask)
        this.bbox = document.querySelector('.bigBox')
        this.ul.innerHTML = `
                    <li><img src="${goods.picture}" alt=""></li>
                    <li><img src="../img/分类推荐44.jpg" alt=""></li>
                    <li><img src="../img/分类推荐45.jpg" alt=""></li>
                    <li><img src="../img/分类推荐46.jpg" alt=""></li>
                   
                    `
        this.sbox.innerHTML = `
                    <img src="${goods.picture}" alt="" class="show">
                    <img src="../img/分类推荐44.jpg" alt="">
                    <img src="../img/分类推荐45.jpg" alt="">
                    <img src="../img/分类推荐46.jpg" alt="">
                  
                    <span></span>
                    `
        this.bbox.innerHTML = `
                    <img src="${goods.picture}" alt="" class="show">
                    <img src="../img/分类推荐44.jpg" alt="">
                    <img src="../img/分类推荐45.jpg" alt="">
                    <img src="../img/分类推荐46.jpg" alt="">
                 
                `

        this.title.innerHTML = goods.name
        this.price.innerHTML = goods.price
        this.desc.innerHTML = goods.desc
        this.Switchpicture()
        // this.over()
        // this.out()
        this.gouwu1(goods)

    }

    Switchpicture() {


        this.mask = document.querySelector('.smallBox>span')
        this.pic1 = document.querySelectorAll('.bigBox>img')
        // console.log(this.pic1)
        this.li = document.querySelectorAll('.imagelist>li')
        this.sbox = document.querySelector('.smallBox')
        this.pic = document.querySelectorAll('.smallBox>img')
        // console.log(this.pic)
        this.mask = document.querySelector('.smallBox>span')
        // console.log(this.mask)
        this.bbox = document.querySelector('.bigBox')
        // this.big.setAttribute('src', )
        // console.log(this.li)
        this.li.forEach((item, index) => {
            //   console.log(this)
            item.onclick = () => {
                // console.log(item)
                this.li.forEach((res, id) => {
                    // console.log(this.li)
                    res.className = ''
                    //  console.log(res)
                    this.pic[id].className = ''
                    // console.log(this.pic[id])
                    this.pic1[id].className = ''

                    //    console.log(this.pic1[id])

                })

                this.pic[index].className = 'show'
                this.pic1[index].className = 'show'
            }

        })

        this.sbox.onmouseover = () => {
            // console.log(this.sbox)
            this.mask.style.display = 'block'
            // console.log(this.mask)
            this.bbox.style.display = 'block'
        }
        this.sbox.onmouseout = () => {
            this.mask.style.display = 'none'
            this.bbox.style.display = 'none'
        }
        this.sbox.onmousemove = (e) => {
            let x = e.clientX - this.mask.offsetWidth / 2 - this.sbox.offsetParent.offsetLeft
            let y = e.pageY - this.mask.offsetHeight / 2 - this.sbox.offsetParent.offsetTop
            if (x <= 0) {
                x = 0
            } else if (x >= this.sbox.offsetWidth - this.mask.offsetWidth) {
                x = this.sbox.offsetWidth - this.mask.offsetWidth
            }
            if (y <= 0) {
                y = 0
            } else if (y >= this.sbox.offsetHeight - this.mask.offsetHeight) {
                y = this.sbox.offsetHeight - this.mask.offsetHeight
            }
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            //计算比例
            let w = x / (this.sbox.offsetWidth - this.mask.offsetWidth)
            let h = y / (this.sbox.offsetHeight - this.mask.offsetHeight)

            //让大图进行移动
            // this.pic1.style.left = -w * (this.pic1.offsetWidth - this.bbox.offsetWidth) + 'px'
            // console.log(this.pic1)
            // this.pic1.style.top = -h * (this.pic1.offsetHeight - this.bbox.offsetHeight) + 'px'
            //     for(let k=0;k<this.pic1.length;k++){
            //         this.pic1[k].style.left = -w * (pic1[k].offsetWidth - this.bbox.offsetWidth) + 'px'
            //         this.pic1[k].style.top = -h * (pic1[k].offsetHeight - this.bbox.offsetHeight) + 'px'                      }
            // }
            // console.log(this.pic1)
            this.pic1.forEach((item) => {
                // console.log(item)
                item.style.left = -w * (item.offsetWidth - this.bbox.offsetWidth) + 'px'
                item.style.top = -h * (item.offsetHeight - this.bbox.offsetHeight) + 'px'
            })

        }

    }

    abtn1() {
        this.abtn.onclick = () => {
            this.num.value++
        }
    }
    jbtn1() {
        this.jbtn.onclick = () => {
            if (this.num.value == 1) {
                return false
            } else {
                ``
                this.num.value--
            }
        }
    }
    gouwu1(goods) {
        let datalist = JSON.parse(localStorage.getItem('cart')) || []
        console.log(datalist);
        this.input.onclick = () => {


            if (!datalist.length) {
                console.log(1);
                datalist.push(goods)
                alert('加入购物车成功')
                goods.cart_number = Number(this.num.value)

            } else {
                console.log(2);
                let res = datalist.some(item => { return item.id == goods.id })
                if (res) {
                    let index = datalist.find(item => { return item.id == goods.id })
                    index.cart_number += Number(this.num.value)
                    alert('加入购物车成功')

                } else {
                    datalist.push(goods)
                    goods.cart_number += Number(this.num.value)
                    alert('加入购物车成功')
                    console.log(this.num.value)


                }



            }




            this.count()
            localStorage.setItem('cart', JSON.stringify(datalist))
        }

    }
    count() {
        let list = JSON.parse(localStorage.getItem('cart')) || []
        let num = 0
        list.forEach(item => {
            num += item.cart_number
        })
        this.span.innerHTML = num
    }
}


new detailsSide()